<template>
	<div class="thePage">
		<!-- 1-顶部标题和产品类按钮 -->
		<top />
		<!-- 2-地图 -->
		<div class="theMap" ref="mapDiv" @click="showVillageDetail = false">
			<!-- 村庄点 -->
			<div
				class="locationVillage"
				v-for="(item, i) in listVillage"
				:key="'village' + i"
				:style="{ left: item.locationX + '%', bottom: item.locationY + '%' }"
				@click.stop="onVillageDetail(item)"
			>
				<!-- <img class="iconVillage" :src="iconVillage" /> -->
				<span class="nameVillage">{{ `${item.name}(${item.altitude}米)` }}</span>
			</div>

			<!-- 种植点 -->
			<img
				class="iconCategoey"
				v-for="(item, i) in listPlant"
				:key="'plant' + i"
				:src="iconCategory[item.categoryId]"
				:style="{ left: item.locationX + '%', bottom: item.locationY + '%' }"
			/>

			<!-- 村庄介绍弹框 -->
			<popup :curVillage="curVillage" :showVillageDetail="showVillageDetail"/>
			
		</div>
		<!-- 3-底部统计数据 -->
		<bottom :totalAcreage="totalAcreage" :totalCount="totalCount" :totalAmount="totalAmount" />
	</div>
</template>

<script>
import top from './components/top.vue';
import bottom from './components/bottom.vue';
import popup from './components/popup.vue';
import { listMapData } from '@/api/home.js';
export default {
	name: 'CenterMap',
	components: {
		top,
		bottom,
		popup
	},
	data() {
		return {
			year: new Date().getFullYear(),
			//iconVillage: require('@/assets/img/map/village.png'),
			iconCategory: {
				1: require('@/assets/img/map/category1.png'),
				2: require('@/assets/img/map/category2.png'),
				3: require('@/assets/img/map/category3.png')
			},
			listVillage: [], //数据结构参见src/mock/home.js
			listPlant: [], //数据结构参见src/mock/home.js
			totalAcreage: 0,
			totalCount: 0,
			totalAmount: 0,

			showVillageDetail: false, //显示村庄介绍弹框
			curVillageId: null
		};
	},
	
	computed: {
		curVillage() {
			if (!this.curVillageId) return null;
			let theVillage = this.listVillage.find(item => item.id == this.curVillageId); //村id、名称、位置信息等
			theVillage.categoryList = this.listPlant.filter(item => item.villageId === theVillage.id);
			let totalAcreage = eval(theVillage.categoryList.map(item => item.acreage).join('+'));
			theVillage.categoryList.forEach(item => {
				item.percent = Math.round((100 * item.acreage) / totalAcreage);
			});
			return theVillage;
		}
	},
	mounted() {
		this.loadData();
	},
	methods: {
		loadData() {
			listMapData({ year: this.year }).then(result => {
				console.log('listMapData Result = ', result);
				this.listVillage = result.listVillage;
				this.listPlant = result.listPlant;
				this.totalAcreage = parseFloat(result.totalAcreage);
				this.totalCount = parseFloat(result.totalCount);
				this.totalAmount = parseFloat(result.totalAmount);
			});
		},
		onVillageDetail(item) {
			this.curVillageId = item.id;
			this.showVillageDetail = true;
		}
	}
};
</script>
<style lang="scss" scoped>
.thePage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	background-color: rgba(4, 123, 83, 0.1);

	.theMap {
		padding: 20px;
		flex: 1;
		width: 90%;
		background-image: url('~@/assets/img/map/center1-map.png');
		background-size: 100% 100%;
		background-position: center center;
		position: relative;

		.locationVillage {
			cursor: pointer;
			position: absolute;
			display: flex;
			flex-direction: row;
			align-items: center;
			.iconVillage {
				width: 32px;
				height: 32px;
			}
			.nameVillage {
				height: 32px;
				font-size: 20px;
				line-height: 32px;
				color: #6baf97;
			}
		}

		.iconCategoey {
			width: 35px;
			height: 35px;
			cursor: pointer;
			position: absolute;
		}
	}
}
</style>
